<template>
  <div class="about">
    <div class="head">

    <div class="head" style="display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;">
          <div class="div" style="display:flex;align-items:center;" @click="$router.go(-1)">
                <img src="../../assets/image/返回白@2x.png" alt="" class="percen">
                <span class="sapn1" style="color:#fff;">返回</span>
      </div>
        <div class="div csgo">
            <span class="sapn2" style="color:#fff;">新建康复服务</span>
        </div>
        <div class="div cs" style="display:flex;align-items:center;" @click="ni()">
          <span class="sapn1" style="color:#fff;">保存</span>
      </div>
    </div>
      <div class="main clear">
          <div class="choes clear">
            <span>服务日期</span>
            <div class="left" @click="show=true">
                <strong>{{main}}</strong>
                <img src="../../assets/image/下拉灰@2x.png" alt="">
            </div>
            <van-popup v-model="show" round position="bottom" :style="{ height: '46%' }">
                <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" title="选择日期" @confirm="chaa($event)" @cancel="show=false"/>
            </van-popup>
        </div>
        <div>
            <van-field v-model="value" placeholder="请输入服务人员" label="服务人员" input-align="right" class="inp" style="font-size: 15px;
    font-weight: 500; color:#000;"/>
        </div>
      </div>
      <div class="show1">

       <van-collapse v-model="activeNames" accordion :border="false">
        <van-collapse-item title="标题1" name="1" id="content">
           <div slot="title" class="pinggu">评估项明细</div>
           <div class="show clear" v-for="(item,k) in msg" :key="k" >
           <span>{{item.text}}</span>
           <img src="../../assets/image/删除@2x.png" alt="" @click="move($event,k)">
       </div>
           </van-collapse-item>
      </van-collapse>
      </div>

    </div>
    <div class="button">
      <button @click="gonext()"><img src="../../assets/image/newadd.png">添加康复服务</button>
    </div>
  </div>
</template>
<script>
import {saveServiceRecord} from '../../apiCanJi/apiCanji'
// import $ from 'jquery'
export default {
  data () {
    return {
      main: '请选择日期',
      show: false,
      minDate: new Date(1000, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      value: '',
      msg: [],
      activeNames: '1'
    }
  },
  methods: {
    chaa (e) {
      this.show = false
      this.main = this.formatDate(this.currentDate)
    },
    aa () {
      // var str = JSON.stringify([]);
      //   localStorage.msg = str;

      var msg = localStorage.msg
      var a = localStorage.xinx
      console.log(msg)
      if (a === undefined || a === null) {
        this.main = '请选择日期'
        this.value = ''
      } else {
        this.main = JSON.parse(a).main
        this.value = JSON.parse(a).value
      }
      if (msg == undefined || msg == []) {
        this.msg = []
        this.activeNames = ''
      } else {
        this.msg = JSON.parse(localStorage.msg)
      }
    },
    formatDate (date) {
      // eslint-disable-next-line no-redeclare
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD
    },
    move (e, k) {
      this.msg.splice(k, 1)
      var str = JSON.stringify(this.msg)
      localStorage.msg = str
    },
    gonext () {
      this.$router.push('recnext')
      var str = JSON.stringify({main: this.main, value: this.value})
      localStorage.xinx = str
    },
    ni () {
      console.log(this.msg)
      var id = JSON.parse(localStorage.disid).id
      var ids = JSON.parse(localStorage.msg)
      var ss = []
      for (var i = 0; i < ids.length; i++) {
        ss.push(ids[i].id)
      }
      if (this.main == '请选择日期') {
        this.$toast('请输入服务日期!')
      } else if (this.value == '') {
        this.$toast('请输入服务人员!')
      } else if (this.msg == '' || this.msg == undefined) {
        this.$toast('请添加康复服务!')
      } else {
        console.log(ss.toString())
        saveServiceRecord({
          dpid: id,
          fuwutime: this.main,
          fuwurenyuan: this.value,
          ids: ss.toString()
        }).then(res => {
          console.log(res)
          var str = JSON.stringify([])
          var str1 = JSON.stringify({main: '请选择日期', value: ''})
          localStorage.msg = str
          localStorage.xinx = str1
          this.$router.go(-1)
        })
      }
    },
    ss () {
      var a = document.getElementById('content').offsetTop // 这是离顶部
      var c = document.getElementById('content')
      var b = window.screen.availHeight
      console.log(b)
      console.log(b - a - 88)
      c.style.height = b - a - 71 - 50 + 'px'
    }

  },
  created () {
    this.aa()
    document.title = '新建康复服务记录'
  },
  mounted () {
    document.body.style.backgroundColor = '#FAF9FE'
    //  $(windows).height()
    //  console.log( $(windows).height());
    //  console.log( $('.content').offset().top);
    this.ss()
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}
.about{
    position: relative;
    /* height: 620px; */
}
.head{
  width: 100%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F1 0%, #1DC7F1 100%);
  position: fixed;
  top:0px;
  z-index:100;
}
.about{
    position: relative;
}
.percen{
  width: 13px;
  height: 13px;
  margin: 0px 5px 0px 15px;
}
.div {
  font-size: 15px;
  font-weight: bold;

}
.head .percen{
  width: 7px;
  height: 13px;
  margin: 0px 5px 0px 15px;
}
.cs{
    float: right;
    margin-right: 14.5px;
}
.choes{
    width: 100%;
    height: 60px;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 60px;
    background-color: #fff;
}
.choes span{
    width: 80px;
    margin-left: 15px;
    margin-right: 15px;
    float: left;
}
.choes strong{
    width: 100px;
    margin-left: 15px;
    float: left;
    color: #333;
    font-weight: normal;
}

.left{
   float: right;
   margin-right: 10px;
}
.left span{
    margin-right: 12.2px;
    color: #999;

}
.left img{
    width: 13px;
    height: 7px;
}
.show1{
  margin-top: 7px;
  background-color: #fff;

}
.show{
    /* margin-left: 15px;
    margin-right: 15px; */
    height: 44px;
    line-height: 44px;

}
.show span{
  font-size: 15px;
    float: left;
}
.show img{
    float: right;
    width: 22px;
    height: 22px;
    margin-top: 11px;
}
button{
width: 90%;
height: 44px;
background: linear-gradient(90deg, #1DA3F1, #1DC7F1);
border-radius: 22px;
display:flex;
  align-items: center;
  justify-content: center;
margin: 0px auto;
border: none;
color: #fff;
font-size: 15px;
}
button img{
  width:13px;
  height:13px;
  margin-right: 5px;
}
.main{
  margin-top: 44px;
}
.inp{
    background-color: #fff;
}
/deep/ .van-picker__confirm{
    color: #1DA4F2 !important;
}
/deep/ .van-field__label span{
  color: #333;
    font-size: 15px;
    font-weight: 500;
}
.pinggu{
  padding-left: 8.5px;
  border-left: 2px solid #1da4f2;
  font-size: 15px;
    font-weight: 500;
}
#content{
  overflow:auto;
  margin-bottom: 1888px;
}
.button{
    width: 100%;
    height: 66px;
    background-color: #fff;
    position: fixed;
    bottom: 50px;
    display: flex;
    justify-content:space-between;
    align-items:center;
    z-index: 500;
}
</style>
